<template>
  <div id="UpdateCustomerInfo">
    <div class="breadcrumbs" style="margin: 0px;padding-top: 20px;">
      <ul>
        <li class="home"><a href="index.html" title="Go to Home Page"><strong style="font-size: 18px;">客户管理</strong></a>
          <span>/</span>
        </li>
        <li><strong>客户信息管理</strong><span>/</span></li>
        <li><strong>修改客户信息</strong></li>
      </ul>
    </div>
    <article class="col-main">
      <div class="my-account block block-account" style="padding-left: 20px;">

        <div class="page-title" style="border-bottom: #F1F3F6 1px solid;">
          <h2>修改客户信息</h2>
        </div>
        <form action="">
          <div style="margin: 0px 20px 40px 20px">
            <div class="row" style="border-bottom:1px #FFFFFF solid">
              <div class="col-sm-3 col-md-3 text-center the_title_style">
                <span style="font-size: 20px;font-weight: bolder">客户编号</span>
              </div>
              <div class="col-sm-3 col-md-3 text-center the_content_style">
                <span style="font-size: 20px">{{customerInfo.customerId}}</span>
              </div>
              <div class="col-sm-3 col-md-3 text-center the_title_style">
                <span style="font-size: 20px;font-weight: bolder">名称</span>
                &nbsp;<span style="color: red;font-size: 20px">*</span>
              </div>
              <div class="col-sm-3 col-md-3 text-center the_content_style">
                <input v-model="customerInfo.customerName" readonly="readonly" type="text" class="form-control" placeholder="请输入客户的名称" style="width: 150px">
              </div>
            </div>
            <div class="row" style="border-bottom:1px #FFFFFF solid">
              <div class="col-sm-3 col-md-3 text-center the_title_style">
                <span style="font-size: 20px;font-weight: bolder">地区</span>
                &nbsp;<span style="color: red;font-size: 20px">*</span>
              </div>
              <div class="col-sm-3 col-md-3 text-center the_content_style">
                <input v-on:blur="checkCustomerRegion" type="text" v-model="customerInfo.customerRegion" class="form-control" placeholder="请输入客户所在地区" style="width: 150px">
              </div>
              <div class="col-sm-3 col-md-3 text-center the_title_style">
                <span style="font-size: 20px;font-weight: bolder">客户经理</span>
                &nbsp;<span style="color: red;font-size: 20px">*</span>
              </div>
              <div class="col-sm-3 col-md-3 text-center the_content_style">
                <input v-model="customerInfo.staffName" readonly="readonly" type="text" class="form-control" style="width: 150px">
              </div>
            </div>
            <div class="row" style="border-bottom:1px #FFFFFF solid">
              <div class="col-sm-3 col-md-3 text-center the_title_style">
                <span style="font-size: 20px;font-weight: bolder">客户等级</span>
                &nbsp;<span style="color: red;font-size: 20px">*</span>
              </div>
              <div class="col-sm-9 col-md-3 text-center the_content_style">
                <select v-model="customerInfo.customerGrade" class="form-control" style="width: 150px">
                  <option>--请选择--</option>
                  <option v-for="item in customerGrade" :value="item.dictionaryValue">{{item.dictionaryEntry}}</option>
                </select>
              </div>
              <div class="col-sm-3 col-md-3 text-center the_title_style">
                <span style="font-size: 20px;font-weight: bolder">客户满意度</span>
                &nbsp;<span style="color: red;font-size: 20px">*</span>
              </div>
              <div class="col-sm-9 col-md-3 text-center the_content_style">
                <select v-model="customerInfo.customerSatisfaction" class="form-control" style="width: 150px">
                  <option>--请选择--</option>
                  <option v-for="item in customerSatisfaction" :value="item.dictionaryValue">{{item.dictionaryEntry}}</option>
                </select>
              </div>
            </div>
            <div class="row" style="border-bottom:8px #FFFFFF solid">
              <div class="col-sm-3 col-md-3 text-center the_title_style">
                <span style="font-size: 20px;font-weight: bolder">客户信用度</span>
                &nbsp;<span style="color: red;font-size: 20px">*</span>
              </div>
              <div class="col-sm-3 col-md-3 text-center the_content_style">
                <select v-model="customerInfo.customerCredit" class="form-control" style="width: 150px">
                  <option>--请选择--</option>
                  <option v-for="item in customerCredit" :value="item.dictionaryValue">{{item.dictionaryEntry}}</option>
                </select>
              </div>
              <div class="col-sm-3 col-md-3 text-center the_title_style"></div>
              <div class="col-sm-3 col-md-3 text-center the_content_style"></div>
            </div>

            <div class="row" style="border-bottom:1px #FFFFFF solid">
              <div class="col-sm-3 col-md-3 text-center the_title_style">
                <span style="font-size: 20px;font-weight: bolder">地址</span>
                &nbsp;<span style="color: red;font-size: 20px">*</span>
              </div>
              <div class="col-sm-9 col-md-3 text-center the_content_style">
                <input v-on:blur="checkCustomerAddress" v-model="customerInfo.customerAddress" type="text" class="form-control" placeholder="请输入客户的地址" style="width: 150px">
              </div>
              <div class="col-sm-3 col-md-3 text-center the_title_style">
                <span style="font-size: 20px;font-weight: bolder">邮政编码</span>
                &nbsp;<span style="color: red;font-size: 20px">*</span>
              </div>
              <div class="col-sm-9 col-md-3 text-center the_content_style">
                <input v-on:blur="checkCustomerPostalCode" v-model="customerInfo.customerPostalCode" type="text" class="form-control" placeholder="请输入客户的邮政编码" style="width: 150px">
              </div>
            </div>
            <div class="row" style="border-bottom:1px #FFFFFF solid">
              <div class="col-sm-3 col-md-3 text-center the_title_style">
                <span style="font-size: 20px;font-weight: bolder">电话</span>
                &nbsp;<span style="color: red;font-size: 20px">*</span>
              </div>
              <div class="col-sm-3 col-md-3 text-center" style="background-color: #EAEAEA;padding: 10px 0px">
                <input v-on:blur="checkCustomerTel" v-model="customerInfo.customerTel" type="text" class="form-control" placeholder="请输入客户的电话" style="width: 150px">
              </div>
              <div class="col-sm-3 col-md-3 text-center the_title_style">
                <span style="font-size: 20px;font-weight: bolder">邮箱</span>
                &nbsp;<span style="color: red;font-size: 20px">*</span>
              </div>
              <div class="col-sm-3 col-md-3 text-center the_content_style">
                <input v-on:blur="checkCustomerEmail" v-model="customerInfo.customerEmail" type="text" class="form-control" placeholder="请输入客户的邮箱" style="width: 150px">
              </div>
            </div>
            <div class="row" style="border-bottom:1px #FFFFFF solid">
              <div class="col-sm-3 col-md-3 text-center the_title_style">
                <span style="font-size: 20px;font-weight: bolder">营业执照注册号</span>
              </div>
              <div class="col-sm-3 col-md-3 text-center the_content_style">
                <input v-model="customerInfo.customerLicense" type="text" class="form-control" placeholder="请输入客户的营业执照注册号" style="width: 150px">
              </div>
              <div class="col-sm-3 col-md-3 text-center the_title_style">
                <span style="font-size: 20px;font-weight: bolder">法人</span>
                &nbsp;<span style="color: red;font-size: 20px">*</span>
              </div>
              <div class="col-sm-3 col-md-3 text-center the_content_style">
                <input v-on:blur="checkLegalPerson" v-model="customerInfo.customerLegalPerson" type="text" class="form-control" placeholder="请输入客户的法人" style="width: 150px">
              </div>
            </div>

            <div class="row" style="border-bottom:1px #FFFFFF solid">
              <div class="col-sm-3 col-md-3 text-center the_title_style">
                <span style="font-size: 20px;font-weight: bolder">注册资金(万元)</span>
              </div>
              <div class="col-sm-3 col-md-3 text-center the_content_style">
                <input v-model="customerInfo.customerRegisteredCapital" type="text" class="form-control" placeholder="请输入客户的注册资金(万元)" style="width: 150px">
              </div>
              <div class="col-sm-3 col-md-3 text-center the_title_style">
                <span style="font-size: 20px;font-weight: bolder">年营业额</span>
              </div>
              <div class="col-sm-3 col-md-3 text-center the_content_style">
                <input v-model="customerInfo.customerAnnualTurnover" type="text" class="form-control" placeholder="请输入客户的年营业额" style="width: 150px">
              </div>
            </div>

            <div class="row" style="border-bottom:1px #FFFFFF solid">
              <div class="col-sm-3 col-md-3 text-center the_title_style">
                <span style="font-size: 20px;font-weight: bolder">开户银行</span>
                &nbsp;<span style="color: red;font-size: 20px">*</span>
              </div>
              <div class="col-sm-3 col-md-3 text-center the_content_style">
                <input v-on:blur="checkCustomerBank" v-model="customerInfo.customerBank" type="text" class="form-control" placeholder="请输入客户的开户银行" style="width: 150px">
              </div>
              <div class="col-sm-3 col-md-3 text-center the_title_style">
                <span style="font-size: 20px;font-weight: bolder">银行账号</span>
                &nbsp;<span style="color: red;font-size: 20px">*</span>
              </div>
              <div class="col-sm-3 col-md-3 text-center the_content_style">
                <input v-on:blur="checkComerBankAccount" v-model="customerInfo.customerBankAccount" type="text" class="form-control" placeholder="请输入客户的银行账号" style="width: 150px">
              </div>
            </div>

            <div class="row" style="border-bottom:1px #FFFFFF solid">
              <div class="col-sm-3 col-md-3 text-center the_title_style">
                <span style="font-size: 20px;font-weight: bolder">地税登记号</span>
              </div>
              <div class="col-sm-3 col-md-3 text-center the_content_style">
                <input v-model="customerInfo.customerLocalTax" type="text" class="form-control" placeholder="请输入客户的地税登记号" style="width: 150px">
              </div>
              <div class="col-sm-3 col-md-3 text-center the_title_style">
                <span style="font-size: 20px;font-weight: bolder">国税登记号</span>
              </div>
              <div class="col-sm-3 col-md-3 text-center the_content_style">
                <input v-model="customerInfo.customerNationalTax" type="text" class="form-control" placeholder="请输入客户的国税登记号" style="width: 150px">
              </div>
            </div>

          </div>

          <div class="text-center" style="margin-top: 40px;padding-bottom: 30px">
            <button v-on:click="updateCustomer" class="btn btn-primary">保存</button>
            <router-link to="CustomerInfoList" class="btn btn-default">返回</router-link>
          </div>
        </form>
      </div>
    </article>
  </div>
</template>

<script>
export default {
  name: "UpdateCustomerInfo",
  data(){
    return{
      customerGrade:[],
      customerSatisfaction:[],
      customerCredit:[],
      customerInfo:{
        customerId:'',
        customerName:'',//客户名字
        customerRegion:'',//所在地区
        customerManager:'',//客户经理
        staffName:'',//客户经理名字
        customerGrade:0,//客户等级
        customerSatisfaction:0,//客户满意度
        customerCredit:0,//客户信用度
        customerAddress:'',//所在地址
        customerPostalCode:'',//邮政编码
        customerTel:'',//客户电话
        customerEmail:'',//客户邮箱
        customerLicense:'',//营业执照号
        customerLegalPerson:'',//客户法人
        customerRegisteredCapital:'',//注册资金
        customerAnnualTurnover:'',//年营业额
        customerBank:'',//开户银行
        customerBankAccount:'',//银行卡号
        customerLocalTax:'',//地税号
        customerNationalTax:'',//国税号
        customerState:''//客户状态
      },
    }
  },
  methods:{
    getCustomerCredit(){
      this.$axios.get('/dictionary/loadCustomerCredit').then(
        res=>{
          this.customerCredit=res.data.data
          // console.log(res.data.data)
        }
      )
    },
    updateCustomer(){
      if (this.checkCustomerRegion()){
        if (this.checkCustomerGrade()){
          if (this.checkCustomerSatisfaction()){
            if (this.checkCustomerCredit()){
              if (this.checkCustomerAddress()){
                if (this.checkCustomerPostalCode()){
                  if (this.checkCustomerTel()){
                    if (this.checkCustomerEmail()){
                      if (this.checkLegalPerson()){
                        if (this.checkCustomerBank()){
                          if (this.checkComerBankAccount()){
                            this.$axios.put('/customer/updateCustomer',this.customerInfo).then(
                              res=>{
                                this.$message({
                                  showClose: true,
                                  message: res.data.message,
                                  type: 'success'
                                });
                                this.$router.push('/MemuBar/CustomerInfoList')
                              }
                            )
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    },
    getCustomerGrade(){
      this.$axios.get('/dictionary/loadCustomerGrade').then(
        res=>{
          this.customerGrade=res.data.data
          // console.log(res.data.data)
        }
      )
    },
    getustomerSatisfaction(){
      this.$axios.get('/dictionary/loadCustomerSatisfaction').then(
        res=>{
          this.customerSatisfaction=res.data.data
        }
      )
    },
    loadCustomer(){
      this.$axios.get('/customer/loadCustomerByCustomerId',{
        params:{
          customerId:this.$route.query.customerId
        }
      }).then(
        res=>{
          this.customerInfo=res.data.data
          // console.log(res.data.data)
        }
      )
    },
    checkCustomerRegion(){
      if (this.customerInfo.customerRegion == ''){
        this.$message({
          showClose: true,
          message: '客户所在地区不可为空',
          type: 'error'
        });
        return false;
      }else {
        return true;
      }
    },
    checkCustomerAddress(){
      if (this.customerInfo.customerAddress == ''){
        this.$message({
          showClose: true,
          message: '客户的地址不可为空',
          type: 'error'
        });
        return false;
      }else {
        return true;
      }
    },
    checkCustomerPostalCode(){
      var postalCode= /^[0-8][0-7]\d{4}$/;
      if (this.customerInfo.customerPostalCode == ''){
        this.$message({
          showClose: true,
          message: '客户的邮编不可为空',
          type: 'error'
        });
        return false;
      }else if (this.customerInfo.customerPostalCode.length != 6){
        this.$message({
          showClose: true,
          message: '客户的邮编格式不正确',
          type: 'error'
        });
        return false;
      } else if(!postalCode.test(this.customerInfo.customerPostalCode)){
        this.$message({
          showClose: true,
          message: '客户的邮编不存在',
          type: 'error'
        });
        return false;
      }else {
        return true;
      }
    },
    checkCustomerTel(){
      var reg = /^((13\d)|(14[5,7,9])|(15[0-3,5-9])|(166)|(17[0,1,3,5,7,8])|(18[0-9])|(19[8,9]))\d{8}/;
      if (this.customerInfo.customerTel == ''){
        this.$message({
          showClose: true,
          message: '客户电话不可为空',
          type: 'error'
        });
        return false;
      }else if (this.customerInfo.customerTel.length != 11){
        this.$message({
          showClose: true,
          message: '客户电话格式不正确',
          type: 'error'
        });
        return false;
      }else if (!reg.test(this.customerInfo.customerTel)){
        this.$message({
          showClose: true,
          message: '客户电话号码不存在',
          type: 'error'
        });
        return false;
      } else {
        return true;
      }
    },
    checkCustomerEmail(){
      var reg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
      if (this.customerInfo.customerEmail == ''){
        this.$message({
          showClose: true,
          message: '客户邮箱不能为空',
          type: 'error'
        });
        return false;
      }else if (!reg.test(this.customerInfo.customerEmail)){
        this.$message({
          showClose: true,
          message: '客户邮箱格式不正确',
          type: 'error'
        });
        return false;
      }else {
        return true;
      }
    },
    checkLegalPerson(){
      if (this.customerInfo.customerLegalPerson==''){
        this.$message({
          showClose: true,
          message: '客户的法人不可为空',
          type: 'error'
        });
        return false;
      }else {
        return true;
      }
    },
    checkCustomerBank(){
      if (this.customerInfo.customerBank==''){
        this.$message({
          showClose: true,
          message: '客户的开户银行不可为空',
          type: 'error'
        });
        return false;
      }else{
        return true;
      }
    },
    checkComerBankAccount(){

      var lastNum=this.customerInfo.customerBankAccount.substr(this.customerInfo.customerBankAccount.length-1,1);//取出最后一位（与luhn进行比较）

      var first15Num=this.customerInfo.customerBankAccount.substr(0,this.customerInfo.customerBankAccount.length-1);//前15或18位
      var newArr=new Array();
      for(var i=first15Num.length-1;i>-1;i--){    //前15或18位倒序存进数组
        newArr.push(first15Num.substr(i,1));
      }
      var arrJiShu=new Array();  //奇数位*2的积 <9
      var arrJiShu2=new Array(); //奇数位*2的积 >9

      var arrOuShu=new Array();  //偶数位数组
      for(var j=0;j<newArr.length;j++){
        if((j+1)%2==1){//奇数位
          if(parseInt(newArr[j])*2<9)
            arrJiShu.push(parseInt(newArr[j])*2);
          else
            arrJiShu2.push(parseInt(newArr[j])*2);
        }
        else //偶数位
          arrOuShu.push(newArr[j]);
      }

      var jishu_child1=new Array();//奇数位*2 >9 的分割之后的数组个位数
      var jishu_child2=new Array();//奇数位*2 >9 的分割之后的数组十位数
      for(var h=0;h<arrJiShu2.length;h++){
        jishu_child1.push(parseInt(arrJiShu2[h])%10);
        jishu_child2.push(parseInt(arrJiShu2[h])/10);
      }

      var sumJiShu=0; //奇数位*2 < 9 的数组之和
      var sumOuShu=0; //偶数位数组之和
      var sumJiShuChild1=0; //奇数位*2 >9 的分割之后的数组个位数之和
      var sumJiShuChild2=0; //奇数位*2 >9 的分割之后的数组十位数之和
      var sumTotal=0;
      for(var m=0;m<arrJiShu.length;m++){
        sumJiShu=sumJiShu+parseInt(arrJiShu[m]);
      }

      for(var n=0;n<arrOuShu.length;n++){
        sumOuShu=sumOuShu+parseInt(arrOuShu[n]);
      }

      for(var p=0;p<jishu_child1.length;p++){
        sumJiShuChild1=sumJiShuChild1+parseInt(jishu_child1[p]);
        sumJiShuChild2=sumJiShuChild2+parseInt(jishu_child2[p]);
      }
      //计算总和
      sumTotal = parseInt(sumJiShu) + parseInt(sumOuShu) + parseInt(sumJiShuChild1) + parseInt(sumJiShuChild2);

      //计算luhn值
      var k= parseInt(sumTotal)%10==0?10:parseInt(sumTotal)%10;
      var luhn= 10-k;


      console.log(this.customerInfo.customerBankAccount.length)
      if (this.customerInfo.customerBankAccount == ''){
        this.$message({
          showClose: true,
          message: '客户的开户银行账户不可为空',
          type: 'error'
        });

        return false;
      }else if (this.customerInfo.customerBankAccount.length<16 || this.customerInfo.customerBankAccount.length>19){
        this.$message({
          showClose: true,
          message: '客户的开户银行账户格式不对',
          type: 'error'
        });
        return false;
      }
      else if(lastNum!=luhn){
        this.$message({
          showClose: true,
          message: '客户的开户银行账户不存在',
          type: 'error'
        });
        return false;
      }
      else {
        return true;
      }
    },
    checkCustomerGrade(){
      if (this.customerInfo.customerGrade == 0){
        this.$message({
          showClose: true,
          message: '客户的等级不可为空',
          type: 'error'
        });
        return false;
      }else {
        return true;
      }
    },
    checkCustomerSatisfaction(){
      if (this.customerInfo.customerSatisfaction == 0){
        this.$message({
          showClose: true,
          message: '客户的满意度不可为空',
          type: 'error'
        });
        return false;
      }else {
        return true;
      }
    },
    checkCustomerCredit(){
      if (this.customerInfo.customerCredit == 0){
        this.$message({
          showClose: true,
          message: '客户的信用度不可为空',
          type: 'error'
        });
        return false;
      }else {
        return true;
      }
    }
  },
  created() {
    this.getCustomerCredit()
    this.getCustomerGrade()
    this.getustomerSatisfaction()
    this.loadCustomer()
  }
}
</script>

<style scoped>
.the_title_style{
  height:55px;
  background-color: #CDCDCD;
  padding: 10px 0px
}
.the_content_style{
  height:55px;
  background-color: #EAEAEA;
  padding: 10px 0px
}
</style>
